<template>
  <a-modal
    title="详情"
    width="80%"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel"
    destroyOnClose
  >
    <div class="table-operator">
      <a-button
        :disabled="!tableData.length"
        type="primary"
        icon="download"
        @click="handleExportExcel"
      >导出</a-button>
    </div>

    <a-table
      style="marginTop: 10px;"
      ref="batchDetailTable"
      size="default"
      :rowKey="(record, index) => index"
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :pagination="false"
      :scroll="{ x: true }"
    >
      <span
        slot="action"
        slot-scope="text, record"
      >
        <template>
          <a @click="handleOpenOrderDetailModel(record)">详情</a>
        </template>
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { getOrderListByBatchId } from '@/api/manage'
import { BATCH_ORDERS_LIST_COLUMNS } from '../constants/batchDetail.js'
import { exportJsonToExcel, getHeaderAndDataFromTable } from '@/utils/exportExcel'

export default {
  name: 'BatchDetailModal',
  components: {
    STable
  },
  data() {
    return {
      visible: false,
      columns: BATCH_ORDERS_LIST_COLUMNS,
      tableData: [],
      loading: false,
      batchId:'',
      projectId:''
    }
  },
  methods: {
    show(record) {
      this.batchId = record.batchId
      this.projectId = record.projectId
      this.tableData = []
      this.visible = true
      this.loading = true
      getOrderListByBatchId(record.batchId)
        .then(res => {
          this.tableData = res.resData
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCancel() {
      this.visible = false
    },
    handleOpenOrderDetailModel(record) {
      this.$emit('orderAction', record.projectId, record.individualUserId)
    },
    handleExportExcel() {
      const { header, data } = getHeaderAndDataFromTable(
        BATCH_ORDERS_LIST_COLUMNS,
        this.tableData
      )

      exportJsonToExcel({
        header,
        data,
        filename: `项目${this.projectId}_批次${this.batchId}_详情`
      })
    }
  }
}
</script>
